<template>
    <div class="productCard">
        <div class="product" v-for="(item, i) in productList" :key="i" :style="{ backgroundImage: `url(${item.pic})` }">
            <div class="productContent">
                <h2 class="name">{{ item.name }}</h2>
                <p class="desc">{{ item.description }}</p>
                <p class="btn" @click="toDetails(item.id)">Learn More</p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getProductList } from '@/api/common';
import { useRouter } from 'vue-router';
const router = useRouter()
const productList = ref()
const _getProductList = async () => {
    const params = {
        current: 1,
        pageSize: 2
    }
    const res = await getProductList(params);
    productList.value = res.data
};


await _getProductList();
const toDetails = (id: number) => {
   router.push({ name: 'productDetail', query: { id } });
}
</script>
<style lang="scss" scoped>
.productCard {
    padding: 16px 12px;
    display: flex;
    justify-content: space-between;

    .product {
        width: 940px;
        height: 668px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        color: #FFFFFF;

        .productContent {
            width: 100%;
            text-align: center;
            padding-bottom: 60px;

            .name {
                font-size: 32px;
                font-weight: 700;
                line-height: 40px;
                text-align: center;
                margin-bottom: 7px;
                width: 100%;
            }

            .desc {
                font-size: 24px;
                font-weight: 400;
                line-height: 32px;
                margin-bottom: 20px;
            }
            .btn {
                width: 148px;
                height: 40px;
                line-height: 40px;
                border-radius: 80px;
                background: #846FC1;
                margin:0 auto;
                cursor: pointer;
            }
        }

    }
}
@media screen and (max-width: 750px) {
    .productCard {
        padding: 0.28rem 0 0;
        flex-wrap: wrap;

        .product {
            width: 100%;
            height: 9.56rem;
            margin-bottom: 0.28rem;
            align-items: flex-start;
            box-sizing: border-box;
            padding-top: 0.77rem;
            .productContent{
                .name {
                    font-size: 0.48rem;
                    line-height: 0.6rem;
                    margin-bottom: 0.13rem;
                }
                .desc {
                    font-size: 0.32rem;
                    line-height: 0.4rem;
                    margin-bottom: 0.28rem;
                }
                .btn {
                    width: 2.2rem;
                    height: 0.64rem;
                    line-height: 0.64rem;
                    border-radius: 0.32rem;
                    font-size: 0.2rem;
                    margin: 0 auto;
                }
            }
        }
    }
    
}
</style>